<template>
	<div class="payment">
		<header @click="$router.go(-1)">
			<img src="../../assets/images/pays/back.jpg" alt="" />
			<div></div>
			<p>付款</p>
		</header>
		<div class="content">
			<div class="user_infos">
				<div class="user_info">
					<div class="user_info_left">
						<p>付款给&nbsp;舒城林润网络有限公司</p>
						<span>昵称:lizhicai83(**才)</span>
					</div>
					<div class="user_info_right">
						<img src="../../assets/images/banner/banner.jpg" alt="" />
					</div>
				</div>
				<div class="sum_input">
					<p>金额</p>
					<div>
						<input @focus="preventKey" type="text" v-model.trim="input1" />
						<span>￥</span>
						<p v-if="input1===''"></p>
					</div>
				</div>
				<div class="btn">付款</div>
				<div class="remark">
					<p>添加备注</p>
				</div>
			</div>
		</div>
		<!-- 模拟数字键盘 -->
		<div class="number_key" v-if="isShow">
			<div class="shows" @click="hiddenKey">
				<img src="../../assets/images/pays/down.jpg" alt="" />
			</div>
			<div class="keyboards">
				<div class="key1">
					<p @click="select('1')">1</p>
					<p @click="select('2')">2</p>
					<p @click="select('3')">3</p>
				</div>
				<div class="key2">
					<p @click="select('4')">4</p>
					<p @click="select('5')">5</p>
					<p @click="select('6')">6</p>
				</div>
				<div class="key3">
					<p @click="select('7')">7</p>
					<p @click="select('8')">8</p>
					<p @click="select('9')">9</p>
				</div>
				<div class="key4">
					<p @click="select('.')">.</p>
					<p @click="select('0')">0</p>
					<p @click="select('-1')">
						<img src="../../assets/images/pays/del.jpg" alt="" />
					</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { XHeader, Tab, TabItem } from 'vux';
	export default {
		name: 'payment',
		data() {
			return {
				input1: '', //金额
				isShow: true, //是否显示键盘
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem
		},
		computed: {

		},
		created() {

		},
		methods: {
			//阻止键盘弹出
			preventKey() {
				this.isShow = true;
				document.activeElement.blur();
			},
			//隐藏键盘
			hiddenKey() {
				this.isShow = false;
			},
			//模拟键盘
			select(id) {
				switch(id) {
					case '1':
						this.input1 += '1';
						break;
					case '2':
						this.input1 += '2';
						break;
					case '3':
						this.input1 += '3';
						break;
					case '4':
						this.input1 += '4';
						break;
					case '5':
						this.input1 += '5';
						break;
					case '6':
						this.input1 += '6';
						break;
					case '7':
						this.input1 += '7';
						break;
					case '8':
						this.input1 += '8';
						break;
					case '9':
						this.input1 += '9';
						break;
					case '.':
						this.input1 += '\.';
						break;
					case '0':
						this.input1 += '0';
						break;
					case '-1':
						this.input1 = this.input1.slice(0, this.input1.length - 1);
						break;
				}
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.payment {
		text-align: left;
		header {
			display: flex;
			align-items: center;
			background: #393a3f;
			padding: .46rem 0 .26rem .34rem;
			img {
				width: .38rem;
				height: .39rem;
			}
			div {
				width: 2px;
				height: .5rem;
				background: #2d2d31;
				margin: 0 .26rem;
			}
			p {
				font-size: .34rem;
				color: #fff;
			}
		}
		.content {
			background: #ededed;
			padding-top: .05rem;
			.user_infos {
				width: 91.7%;
				background: #fff;
				margin: 0 auto;
				.user_info {
					height: 1.66rem;
					display: flex;
					justify-content: space-around;
					background: #fbfbfb;
					padding: .45rem 0 0 0;
					.user_info_left {
						p {
							font-size: .28rem;
							color: #000;
							margin-bottom: .12rem;
						}
						span {
							font-size: .24rem;
							color: #737373;
						}
					}
					.user_info_right {
						img {
							width: .84rem;
							height: .84rem;
						}
					}
				}
				.sum_input {
					height: 2.24rem;
					padding: .4rem 0 0 .62rem;
					p {
						font-size: .28rem;
						color: #212121;
						margin-bottom: .52rem;
					}
					>div {
						position: relative;
						input {
							width: 5.62rem;
							height: .8rem;
							border: 0;
							border-radius: 0;
							font-size: .64rem;
							color: #000;
							border-bottom: 1px solid #dadada;
							padding-left: .6rem;
						}
						span {
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
							font-size: .6rem;
							color: #000;
							font-weight: 700;
						}
						p {
							position: absolute;
							left: .7rem;
							top: 50%;
							transform: translateY(-50%);
							font-size: .6rem;
							color: #575757;
							/* 光标闪烁1 */
							width: 2px;
							height: .4rem;
							display: inline-block;
							animation: blink 1s infinite steps(1, start);
						}
						/* 光标闪烁2 */
						@keyframes blink {
							0%,
							100% {
								background-color: #fff;
							}
							50% {
								background-color: #000000;
							}
						}
					}
				}
				.btn {
					width: 5.62rem;
					height: 1rem;
					margin: .56rem auto .3rem auto;
					font-size: .42rem;
					color: #fff;
					border-radius: .08rem;
					background: #eb063d;
					text-align: center;
					line-height: 1rem;
				}
				.remark {
					padding-bottom: .1rem;
					p {
						font-size: .24rem;
						color: #4e638f;
						text-align: center;
					}
				}
			}
		}
		.number_key {
			width: 7.5rem;
			height: 5.62rem;
			background: #f5f5f5;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9999;
			.shows {
				display: flex;
				justify-content: center;
				padding: .2rem;
				border-top: 1px solid #dadada;
				border-bottom: 1px solid #dadada;
				img {
					width: .61rem;
					height: .2rem;
				}
			}
			.keyboards {
				p {
					width: 33.33%;
					height: 1.25rem;
					font-size: .34rem;
					color: #2c2c2c;
					text-align: center;
					line-height: 1.25rem;
				}
				.key1,
				.key2,
				.key3,
				.key4 {
					display: flex;
					p {
						border-bottom: 1px solid #dadada;
						border-right: 1px solid #dadada;
					}
				}
				.key1 p:active,
				.key2 p:active,
				.key3 p:active,
				.key4 p:active {
					background: #dadada;
				}
				.key4 {
					p:nth-of-type(1) {
						background: #e0e0e0;
					}
					p:nth-of-type(3) {
						background: #e0e0e0;
						img {
							width: .73rem;
							height: .46rem;
						}
					}
				}
			}
		}
	}
</style>